<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易严选</title>
  <link rel="stylesheet" href="./css/wyyx.css">
  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="./css/font/demo_index.html">
  <link rel="stylesheet" href="./css/font/iconfont.css">
</head>

<body>
  <!-- header -->
  <header>
    <!-- top -->
    <div class="top">
      <div class="header">
        <div class="main">
          <!-- 菜单 -->
          <ul class="menu">
            <li>登录/注册</li>
            <li>我的订单</li>
            <li>会员</li>
            <li>甄选家</li>
            <li>企业采购></li>
            <li>客户服务></li>
            <li>APP</li>
          </ul>
          <div class="note">
            <i class="iconfont icon-tongzhi"></i>
            <span>因事件（疫情、特大暴雨、台风）影响，部分地区无法配送公告</span>
          </div>
        </div>
      </div>
    </div>
    <!-- top结束 -->
    <!-- bottom -->
    <div class="bottom">
      <div class="main1">
        <!-- search -->
        <div class="search">
          <div class="logo">
            <img src="./img/logo.png" alt="">
          </div>
          <div class="sousuo">
            <div>
              <div class="search_top">
                <i class="iconfont icon-search"></i>
                <input type="text"><span class="but_text">搜索</span>
              </div>
              <div class="search_bottom">
                <a href="">七夕礼物</a>
              </div>
            </div>
          </div>
          <div class="shopcar">
            <div class="car">
              <i class="iconfont icon-gouwuche1"></i>
              <span>购物车</span>
              <i class="iconfont icon-0"></i>
            </div>
          </div>
        </div>
        <!-- search结束 -->
        <!-- menu -->
        <div class="nav">
          <div class="list">
            <ul>
              <li>
                <a href="">首页</a>
                <div class="second">首页二级菜单...</div>
              </li>
              <li>
                <a href="">居家生活</a>
                <div class="second">居家生活二级菜单...</div>
              </li>
              <li>
                <a href="">服饰鞋包</a>
                <div class="second">服饰鞋包二级菜单...</div>
              </li>
              <li>
                <a href="">美食酒水</a>
                <div class="second">美食酒水二级菜单...</div>
              </li>
              <li>
                <a href="">个护清洁</a>
                <div class="second">个护清洁二级菜单...</div>
              </li>
              <li>
                <a href="">母婴亲子</a>
                <div class="second">母婴亲子二级菜单...</div>
              </li>
              <li>
                <a href="">运动旅行</a>
                <div class="second">二级菜单</div>
              </li>
              <li>
                <a href="">数码家电</a>
                <div class="second">二级菜单</div>
              </li>
              <li>
                <a href="">严选全球</a>
                <div class="second">二级菜单</div>
              </li>
              <li>
                <a href="">为你严选</a>
                <div class="second">二级菜单</div>
              </li>
              <li>
                <a href="">众筹</a>
                <div class="second">二级菜单</div>
              </li>
            </ul>
          </div>
        </div>
        <!-- menu结束 -->
      </div>
    </div>
    <!-- bottom结束 -->
  </header>
    <!-- header结束 -->
    <!-- content -->
    <div class="content">
      <!-- 轮播 -->
      <div class="lunbo">
        <img src="./img/lunbo.webp" alt="">
      </div>
      <!-- 轮播结束 -->
      <!-- 人气推荐 -->
      <div class="rqtj">
        <div class="main1">
          <div class="popularity">
            <div class="title">
              <h3 class="name">人气推荐</h3>
              <div class="headerLeft checked">编辑推荐</div>
              <div class="headerLeft">热销总榜</div>
              <div class="headerRight">更多推荐></div>
            </div>
            <div class="product">
              <div id="productItemFirst" class="productItem">
                <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                <img
                  src="https://yanxuan-item.nosdn.127.net/bebff6d69027991f02077dc1f249059f.png?type=webp&quality=95&thumbnail=320x320&imageView"
                  alt="图片丢失">
                <div class="title">
                  <h4 class="name">
                    口袋里的咖啡馆 浓缩胶囊咖啡 焦糖拿铁1袋
                  </h4>
                  <p class="price">¥21.8</p>
                </div>
              </div>
              <div class="productItem">
                <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                <img
                  src="https://yanxuan-item.nosdn.127.net/0736325df88942d67a31b5bd5bb2a502.png?type=webp&quality=95&thumbnail=180y180&imageView"
                  alt="图片丢失">
                <div class="title">
                  <div class="prdtTags"><span>3件8.5折</span></div>
                  <h4 class="name">
                  </h4>
                  <p class="price">
                    <span>
                    </span>
                  </p>
                </div>
              </div>
              <div class="productItem">
                <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                <img
                  src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=180y180&imageView"
                  alt="">
              </div>
              <div class="productItem">
                <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                <img
                  src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=180y180&imageView"
                  alt="">
              </div>
              <div class="productItem">
                <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                <img
                  src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=180y180&imageView"
                  alt="">
              </div>
              <div class="productItem">
                <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                <img
                  src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=180y180&imageView"
                  alt="">
              </div>
              <div class="productItem">
                <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="图片丢失">
                <img
                  src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=180y180&imageView"
                  alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 人气推荐结束 --> 
    </div>
    <!-- content结束 -->
    <!-- footer -->
    <footer>
      <div class="main2">
        <div class="left">
          <p>客户服务</p>
        </div>
        <div class="mid">
          <p>何为网易严选</p>
          <span>网易严选是深受新中产喜爱的生活方式品牌,
            为消费者提供一站式、全品类、全方位的美好生活解决方案。
            我们通过简约、实用、舒适的美学设计, 不断带来高品质灵感好物,
            陪伴3000万新中产用户「活出自己喜欢的样子」,
            共同倡导多元化的生活价值主张——每个人都可以把生活的选择权交还给自己。</span>
        </div>
        <div class="right">
          <p>扫码下载APP</p>
          <img src="./img/二维码.png" alt="">
        </div>
      </div>
    </footer>
    <!-- footer结束 -->
</body>
</html>